<template>
  <div style="margin: 20px 20px">
    <el-alert v-if="rentOutNum>0" :title="`你有${rentOutNum}个租借订单已超时，请尽快缴纳超时费用，以免积累高额费用、影响租购器材`" type="error" effect="dark" center />
    <panel-group />
    <el-row style="margin-top:10px;">
      <el-col v-if="hasPerm('field:fieldbook:list')" :lg="12" :xs="24">
        <line-chart />
      </el-col>
      <el-col v-if="hasPerm('equipment:equipmentrent:list')||hasPerm('equipment:equipmentbuy:list')" :lg="12" :xs="24">
        <pie-chart />
      </el-col>
    </el-row>
    <el-row style="margin-top:30px;">
      <el-card>
        <div slot="header" class="clearfix" style="font-weight:600;">
          <span>校园公告</span>
          <router-link to="/notice/list">
            <el-button style="float: right; padding: 3px 0;font-size:16px" type="text" >查看更多</el-button>
          </router-link>
        </div>
        <div style="margin-top:15px;">
          <home-notice></home-notice>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import homeNotice from './components/HomeNotice'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import { checkOutTimeApi } from "@/api/equipment"
export default {
  components: { homeNotice,PanelGroup,LineChart,PieChart },
  data() {
    return {
      userInfo: {
        userName: "",
      },
      //租借超时提醒
      rentOutNum:0,
    };
  },
  created(){
    this.remindRentBack();
  },
  methods:{
    async remindRentBack(){
      let res = await checkOutTimeApi({uid:this.$store.getters.userId});
      if(res&&res.code==200){
        this.rentOutNum = res.data;
      }
    },
  },
};
</script>
